<template>
    <div>
        <div class="search-con search-con-top">
            订单号：
            <Input v-model="searchData.order_sn" style="width: 150px"></Input>
            用户信息：
            <Input v-model="searchData.user_info" style="width: 150px" placeholder="搜索用户名称、手机号"></Input>
            订单状态：
            <Select v-model="searchData.order_status" style="width:150px" filterable>
                <Option v-for="(item, index) in orderStatusList" :value="index">{{ item }}</Option>
            </Select>
            时间：
            <Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 250px"
                v-model="searchData.create_time"></Date-picker>
            <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
            <!-- <Button type="warning" style="margin-left: 10px;" @click="exportOrderExcel">导出订单</Button>
            <a href="" style="display: none;" ref="load"></a>
            <Upload :show-upload-list="false" name="image" :action="baseUrl + 'image/uploadImg'"
                style="display: inline-block;margin-left: 10px;" :headers="headers" :on-success="importOrderExcel">
                <Button icon="ios-cloud-upload-outline" type="info">批量发货</Button>
            </Upload> -->
        </div>
        <br>
        <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" stripe>
            <template slot-scope="{ row , index}" slot="userInfo">
                <div>昵称：{{ row.username }}</div>
                <div>手机号：{{ row.user_mobile }}</div>
                <div>地址：{{ row.address_detail }}</div>
            </template>
            <!-- <template slot-scope="{ row , index}" slot="orderSlot">
                <div v-if="row.order_type == 1">门店自提</div>
                <div v-if="row.order_type == 2">送货上门</div>
                <div v-if="row.order_type == 1">{{ row.shop_name }}</div>
            </template> -->
            <template slot-scope="{ row , index}" slot="memberSlot">
                <Tooltip content="详情" style="margin-left: 10px;" placement="top">
                    <Icon type="md-bulb" size="24" color="#ff9900" style="cursor: pointer;" @click="shopDetail(row.id)" />
                </Tooltip>
                <!-- <i-button type="error" class="inputMaxWidth" @click="cancelOrder(row.order_sn)" size="small"
                    v-if="row.order_status >= 2 && row.order_status < 7">取消</i-button> -->
                <i-button type="primary" class="inputMaxWidth" @click="showAddRoleDrawer(row.id)"
                  v-show="row.order_status == 2">发货</i-button>

                <i-button type="primary" class="inputMaxWidth" @click="showAfterSalesDrawer(row)"
                  v-show="row.order_status == 7">售后</i-button>
            </template>
        </Table>
        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </Paginate>
        <!-- <Drawer title="详情" :closable="false" width="40" v-model="showDrawer">
            <List header="" footer="" border>
                <ListItem><strong>订单详情:</strong></ListItem>

                <ListItem>预约时间：{{ orderInfo.reserve_time }}</ListItem>
                <ListItem>接单时间：{{ orderInfo.accept_time }}</ListItem>
                <ListItem>出发时间：{{ orderInfo.depart_time }}</ListItem>
                <ListItem>取消时间：{{ orderInfo.cancel_time }}</ListItem>
                <ListItem>达到时间：{{ orderInfo.arrive_time }}</ListItem>
                <ListItem>服务开始时间：{{ orderInfo.begin_time }}</ListItem>
                <ListItem>服务结束时间：{{ orderInfo.complate_time || '' }}</ListItem>
                <ListItem>退款金额：{{ orderInfo.refund_price }}</ListItem>
                <ListItem>订单距离：{{ orderInfo.distance }}KM</ListItem>
                <ListItem>打卡照片：<img :src="baseImgeUrl + orderInfo.image" style="width: 50px;height: 50px;"
                            v-if="orderInfo.image" /></ListItem>
                <div v-for="(item, index) in orderInfo.record " :key="index">
                    <ListItem v-if="item.order_type == 0">订单类型：普通订单</ListItem>
                    <ListItem v-if="item.order_type == 1">订单类型：加钟订单</ListItem>
                    <ListItem v-if="item.order_type == 2">订单类型：升级订单</ListItem>
                    <ListItem>订单号：{{ item.order_sn }}</ListItem>
                    <ListItem>交通方式：{{ item.traffic_type == 1 ? '公交' : '出租' }}</ListItem>
                    <ListItem>通行费：{{ item.traffic_fee }}</ListItem>
                    <ListItem>服务费：{{ item.service_fee }}</ListItem>
                    <ListItem>总计：{{ item.total_amount }}</ListItem>
                    <ListItem>优惠券金额：{{ item.coupon_amount }}</ListItem>
                    <ListItem>支付金额：{{ item.pay_amount }}</ListItem>
                    <ListItem><strong>服务详情:</strong></ListItem>
                    <ListItem>服务图片：<img :src="baseImgeUrl + item.goods_image" style="width: 50px;height: 50px;" />
                    </ListItem>
                    <ListItem>服务名称：{{ item.goods_name }}</ListItem>
                    <ListItem>服务价格：{{ item.goods_price }}</ListItem>
                    <ListItem>购买数量：{{ item.goods_num }}</ListItem>
                    <ListItem>服务时长：{{ item.duration }} /分钟</ListItem>
                </div>
            </List>
        </Drawer> -->
        <Drawer title="详情" :closable="false" width="80" v-model="showDrawer">
            <Table :columns="columns1" :data="list1" border>
                <template slot-scope="{ row , index}" slot="payInfo">
                    <div>服务费：{{ row.service_fee }}</div>
                    <div>车费：{{ row.traffic_fee }}</div>
                    <div>总金额：{{ row.total_amount }}</div>
                    <div>优惠券金额：{{ row.coupon_amount }}</div>
                    <div>支付金额：{{ row.pay_amount }}</div>
                </template>
                <template slot-scope="{ row , index}" slot="timeInfo">
                    <div>服务开始时间：{{ row.service_start_time }}</div>
                    <div>服务结束时间：{{ row.service_end_time }}</div>
                </template>
            </Table>
        </Drawer>
        <Modal v-model="showAdd" title="发货" @on-ok="submit">
            <Form ref="formValidate" :model="deliveryInfo" :label-width="100">
                <FormItem label="物流公司">
                    <Input v-model="deliveryInfo.delivery_express" placeholder="物流公司"></Input>
                </FormItem>
                <FormItem label="物流单号">
                    <Input v-model="deliveryInfo.delivery_no" placeholder="物流单号"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="showAfterSales" title="售后处理" @on-ok="afterSalesSubmit">
            <Form ref="formValidate" :model="afterSalesInfo" :label-width="100">
                <FormItem label="售后类型">
                  <span v-if="afterSalesInfo.after_sales_type == 1">仅退款</span>
                  <span v-if="afterSalesInfo.after_sales_type == 2">退款加售后</span>
                </FormItem>
                <FormItem label="售后时间">
                  {{ afterSalesInfo.after_sales_time }}
                    <!-- <Input v-model="afterSalesInfo.after_sales_time" placeholder="物流单号" readonly></Input> -->
                </FormItem>
                <FormItem label="售后原因"> <!-- :disabled="true" -->
                  {{ afterSalesInfo.after_sales_reason }}
                    <!-- <Input v-model="afterSalesInfo.after_sales_time" placeholder="物流单号" readonly></Input> -->
                </FormItem>
                <!-- <FormItem label="申请售后时状态">
                    <Input v-model="afterSalesInfo.after_sales_status" placeholder="物流单号"></Input>
                </FormItem> -->
                <FormItem label="操作">
                    <radioGroup v-model="afterSalesInfo.type">
                        <Radio label="1">同意</Radio>
                        <Radio label="2">驳回</Radio>
                    </radioGroup>
                </FormItem>
                <!-- <FormItem label="after_sales_reason">
                    <Input v-model="afterSalesInfo.after_sales_status" placeholder="物流单号"></Input>
                </FormItem> -->
            </Form>
        </Modal>
        <a style="display: none;" ref="a" href=""></a>
        <Modal v-model="imgShow" width="330px" :closable="false">
            <img :src="imgShowUrl" style="width: 300px;">
        </Modal>
    </div>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
import Paginate from "@/components/paginate/paginate.vue";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "orderList",
    components: {
        Paginate,
    },
    data() {
        return {
            baseUrl: baseUrl,
            headers: {
                token: getToken()
            },
            baseImgeUrl: baseImgeUrl,
            // 列表
            columns: [
                {
                    title: '订单号',
                    align: "center",
                    key: 'order_sn',
                    width: 180
                },
                {
                    title: '下单信息',
                    align: "center",
                    key: 'username',
                    slot: "userInfo"
                },
                {
                    title: '支付类型',
                    align: "center",
                    key: 'type',
                    render: (h, param) => {
                        let txt = "";
                        if (param.row.type == 1) {
                            txt = "商品购买";
                        } else {
                            txt = "积分兑换";
                        }
                        return h('div', txt);
                    }
                },
                // {
                //     title: '订单类型',
                //     align: "center",
                //     key: 'order_type',
                //     width: 140,
                //     slot: "orderSlot"
                // },

                {
                    title: '支付金额',
                    align: "center",
                    key: 'pay_amount',
                    width: 90
                },
                {
                    title: '支付方式',
                    align: "center",
                    key: 'pay_type',
                    width: 90,
                    render: (h, param) => {
                        let txt = "";
                        switch(param.row.pay_type){
                          case 1:
                          txt = '微信支付';
                          break;
                          case 2:
                          txt = '支付宝支付';
                          break;
                          case 3:
                          txt = '积分+余额';
                          break;
                          case 4:
                          txt = '余额';
                        }

                        return h('div', txt);
                    }
                },
                {
                    title: '支付时间',
                    align: "center",
                    key: 'pay_time',
                    width: 140
                },
                {
                    title: '订单状态',
                    align: "center",
                    key: 'order_status_txt',
                    width: 100
                },
                // {
                //     title: '订单备注',
                //     align: "center",
                //     key: 'remark',
                //     width: 100
                // },

                {
                    title: '创建时间',
                    align: "center",
                    key: 'create_time',
                    width: 140
                },
                {
                    title: '操作',
                    align: "center",
                    key: 'make',
                    slot: 'memberSlot',
                    width: 90,
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
            showAdd: false,
            showDrawer: false,
            // 管理信息
            deliveryInfo: {
                id: 0,
                delivery_express: "",
                delivery_no: "",
            },
            // 售后
            showAfterSales:false,
            afterSalesInfo: {
                id: 0,
                after_sales_type: 0,   //售后状态
                after_sales_time: "",   //售后时间
                after_sales_status: "", //售后时状态
                after_sales_reason: "", //售后原因
            },
            orderInfo: {},
            // 列表
            columns1: [
                {
                    title: '订单号',
                    align: "center",
                    key: 'order_sn',
                },
                {
                    title: '商品名称',
                    align: "center",
                    key: 'goods_name',
                },
                {
                    title: '商品价格',
                    align: "center",
                    key: 'goods_price',
                },
                {
                    title: '购买数量',
                    align: "center",
                    key: 'num',
                },
            ],
            // 数据
            list1: [],
            imgShow: false,
            imgShowUrl: "",
            orderStatusList: [],
        }
    },
    methods: {
        getList() {
            const param = {
                ...this.searchData
            };
            this.$axios('/admin/order/getOrderList', param).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        // 显示添加角色弹窗
        showAddRoleDrawer(id) {
            this.showAdd = true;
            this.deliveryInfo.id = id
        },
        // 添加角色
        submit() {
            this.$axios('/admin/order/sendGoods', this.deliveryInfo).then(res => {
                this.$Message.success('发货成功');
                // this.showAdd = false;
                this.getList();
            })
        },
        exportOrder() {
            this.$axios('/admin/product/export', {}).then(res => {
                this.$refs.a.href = baseImgeUrl + res.file_path
                this.$refs.a.click()
            })
        },
        // timeOk(value) {
        //     this.searchData.start_time = value[0];
        //     this.searchData.end_time = value[1];
        // },
        shopDetail(id) {
            this.showDrawer = true;
            this.$axios('/admin/order/getOrderDetail', { id: id }).then(res => {
                this.list1 = res;
                // this.total = res.total;
            })
        },
        exportOrderExcel() {
            this.$axios('/admin/order/exportOrderExcel', this.searchData).then(res => {
                this.$refs.load.href = baseImgeUrl + res.file_path;
                this.$refs.load.click()
            });
        },
        importOrderExcel(response) {
            this.$axios('/admin/order/batchSendGoods', { file_path: response.data.src }).then(() => {
                this.$Message.success('执行成功');
            })
        },
        getOrderStatusArr() {
            this.$axios('/admin/order/getOrderStatusArr').then((res) => {
                this.orderStatusList = res;
            })
        },
        cancelOrder(order_sn) {
            this.$Modal.confirm({
                title: '审核技师',
                content: "<p>您确定要取消该订单吗？</p>",
                onOk: () => {
                    this.$axios('/admin/order/cancel', { order_sn: order_sn }).then(res => {
                        this.$Message.success('操作成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
        showImg(url) {
            this.imgShow = true;
            this.imgShowUrl = url;
        },

        //售后
        showAfterSalesDrawer(row) {
            this.showAfterSales = true;
            this.afterSalesInfo = row;
        },
        afterSalesSubmit() {
            this.$axios('/admin/order/afterSales', this.afterSalesInfo).then(res => {
                this.$Message.success('处理成功');
                // this.showAdd = false;
                this.getList();
            })
        },
    },
    created() {
        this.getOrderStatusArr();
        this.getList();
    }
}
</script>

<style>
.inputMaxWidth {
    max-width: 180px;
    margin-left: 10px;
}
</style>
